<template>
    <div>
        <Modal v-model="modal" title="确认操作" width="20"  @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card class="line-style" v-for="(item ,index) in industryDict" :key="item.id">
            <div class="line-wrap">
                <div class="line-title">{{item.name}}</div>
                <div class="line-main">
                    <Form :ref="'formCustomRailway'+item.dict_id" :model="item" :rules="ruleCustom" :label-width="110">
                        <Row>
                            <Col span="7">
                                <FormItem label="需求量" prop="need">
                                    <Input type="number" number v-model="item.need" placeholder="请输入需求量">
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="已备量" prop="prepared">
                                    <Input type="number" number v-model="item.prepared" placeholder="请输入已备量">
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="入户量" prop="register">
                                    <Input type="number" number v-model="item.register" placeholder="请输入入户量">
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="入户率" prop="register_ratio">
                                    <Input type="number" number v-model="item.register_ratio" placeholder="请输入入户率">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="同期入户率" prop="period_register_ratio">
                                    <Input type="number" number v-model="item.period_register_ratio" placeholder="请输入同期入户率">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <Form-item label="上报日期" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :options="options1" :value="item.imp_date"
                                                format="yyyy-MM-dd" type="date" placeholder="请选择上报日期"></DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                    </Form>
                    <div class="line-button" v-if="!showDetail">
                        <Button type="primary" @click="validateForm('formCustomRailway'+item.dict_id,index)">保存</Button>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import { getDictInfoList, insert, findList, update } from '@/api/outbreak-management/resume-work/plough-capital'
// 春耕备耕农资添加
export default {
  data () {
    const validateInt = (rule, value, callback) => {
      const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
      if (!reg.test(value)) {
        callback(new Error('最多只允许两位小数'))
      } else {
        callback()
      }
    }
    return {
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 表单数据类型
      formType: '',
      // 提示框
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      // 字典
      industryDict: [],
      // 添加表单/修改表单
      formCustomRailway: {
        need: '',
        prepared: '',
        register: '',
        register_ratio: '',
        period_register_ratio: '',
        imp_date: ''
      },
      ruleCustom: {
        need: [
          { required: true, type: 'number', message: '需求量必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '需求量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        prepared:
            [
              { required: true, type: 'number', message: '已备量必填', trigger: 'blur' },
              { min: 0, max: 99999999, type: 'number', message: '已备量范围0-99999999', trigger: 'blur' },
              { validator: validateInt, trigger: 'blur' }
            ],
        register:
            [
              { required: true, type: 'number', message: '入户量必填', trigger: 'blur' },
              { min: 0, max: 99999999, type: 'number', message: '入户量范围0-99999999', trigger: 'blur' },
              { validator: validateInt, trigger: 'blur' }
            ],
        register_ratio:
            [
              { required: true, type: 'number', message: '入户率必填', trigger: 'blur' },
              { min: 0, max: 99999999, type: 'number', message: '入户率范围0-99999999', trigger: 'blur' },
              { validator: validateInt, trigger: 'blur' }
            ],
        period_register_ratio:
            [
              { required: true, type: 'number', message: '同期入户率必填', trigger: 'blur' },
              { min: 0, max: 99999999, type: 'number', message: '同期入户率范围0-99999999', trigger: 'blur' },
              { validator: validateInt, trigger: 'blur' }
            ],
        imp_date:
            [
              { required: true, message: '上报日期必填', trigger: 'blur' }
            ]
      }
    }
  },
  methods: {
    validateForm (name, index) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          this.formType = index
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    /**
       * 日期格式化
       */
    dateChange (date) {
      let formList = this.industryDict
      formList.forEach(item => {
        item.imp_date = date
      })
    },
    handleSubmit () {
      let item = this.industryDict[this.formType]
      if (item.id) {
        let { dict_id, need, prepared, register, register_ratio, period_register_ratio, imp_date, id } = item
        let requestData = {
          type: dict_id,
          need: need,
          prepared: prepared,
          register: register,
          register_ratio: register_ratio,
          period_register_ratio: period_register_ratio,
          imp_date: imp_date,
          id: id }
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.formType = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        let { dict_id, need, prepared, register, register_ratio, period_register_ratio, imp_date } = item
        let requestData = {
          type: dict_id,
          need: need,
          prepared: prepared,
          register: register,
          register_ratio: register_ratio,
          period_register_ratio: period_register_ratio,
          imp_date: imp_date }
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.formType = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    getDictInfoData () {
      getDictInfoList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          let formList = []
          res.forEach(item => {
            let { label, value } = item
            let formObj = {
              name: label,
              dict_id: value,
              need: 0,
              prepared: 0,
              register: 0,
              register_ratio: 0,
              period_register_ratio: 0,
              imp_date: '' }
            formList.push(formObj)
          })
          this.industryDict = formList
        }
      })
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.imp_date) {
        console.log(this.$route.query.imp_date)
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.imp_date)
      } else {
        this.getDictInfoData()
      }
    },
    getEditData (imp_date) {
      findList({ imp_date }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          res.forEach(item => {
            item.imp_date = this.$common.moment(item.imp_date).format('YYYY-MM-DD')
            item.need = +item.need
            item.prepared = +item.prepared
            item.register = +item.register
            item.register_ratio = +item.register_ratio
            item.period_register_ratio = +item.period_register_ratio
            item.name = item.type
          })
        }
        this.industryDict = res
      })
    }
  },
  created () {
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>
<style scoped lang="less">
</style>
